<template>
	<view class="wui-collectionApplet" :style="[styleComputed]">如果喜欢UNI-WUI，就收藏下吧！</view>
</template>

<script>
export default {
	name: 'w-collectionApplet',
	computed: {
		styleComputed() {
			// #ifdef MP-WEIXIN
			const custom = wx.getMenuButtonBoundingClientRect();
			return {
				'--more': (custom.width / 4) * 3 + 'px',
				'--height': custom.height + 'px',
				'--top': custom.bottom + 'px',
				'--right': this.systemInfo.screenWidth - custom.right + 'px'
			};
			// #endif
			// #ifndef MP-WEIXIN
			return {};
			// #endif
		}
	}
};
</script>

<style lang="scss" scoped>
.wui-collectionApplet {
	position: fixed;
	height: calc(var(--height) - 10rpx);
	top: calc(var(--top) + 20rpx);
	right: var(--right);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 30rpx;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 10rpx;
	font-size: 24rpx;
	color: #fff;
	z-index: 9999;
}
.wui-collectionApplet::after {
	content: '';
	position: absolute;
	top: -30rpx;
	right: calc(var(--more) - 16rpx);
	width: 0;
	height: 0;
	overflow: hidden;
	font-size: 0;
	line-height: 0;
	border-width: 16rpx;
	border-style: solid dashed dashed dashed;
	border-color: transparent transparent rgba(0, 0, 0, 0.3) transparent;
}
</style>
